<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>{{id?'编辑':'添加'}}</legend>
        </fieldset>
        <form class="layui-form" action="" lay-filter="theForm">
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">选择区服</label>
                <div class="layui-input-block">

                    <button type="button" class="layui-btn layui-btn-sm layui-btn-success" v-on:click="changeCheckAllStatus()">{{checkedAll?'反选':'全选'}}</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-success" v-on:click="type=1">所有区</button>

                    <div v-show="type==0">
                        <label v-for="(item,index) in services" class="server-item-checkbox">
                            <input type="checkbox" class="area_checkbox" lay-filter="area_checkbox" name="game_area[]" v-on:change="serverIdChange"
                                   :data-index="index" :value="item.server_id" :checked="item.checked" lay-ignore="" />
                            <span>{{item.name}}</span>
                        </label>
                    </div>
                    <div>
                        结果: <input type="text" readonly="readonly" class="layui-input" style="margin-top:5px;" :value="type==0? '指定服务器: '+ names:'所有区'">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">正文</label>
                <div class="layui-input-block">
                    <input type="text" name="content" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">记录时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="beginTime" lay-verify="required" id="createTime0" placeholder="开始时间" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" lay-verify="required" id="createTime1" placeholder="截止时间" autocomplete="off" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">推送间隔(秒)</label>
                <div class="layui-input-block">
                    <input type="number" name="intervalTime" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit-btn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
</div>
<style>
    .server-item-checkbox{
        margin-top:20px;
        display: inline-block;
        margin-right:20px;
    }
    .server-item-checkbox span{
        user-select: none;
    }
</style>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    Id = urlParam('id')
    var serviceList = JSON.parse(localStorage.getItem('services'));
    var services = [];
    for(var k in serviceList){
        if(serviceList[k].can_push==1) {
            services.push(serviceList[k])
        }
    }
    for(k in services){
        services[k].checked = false;
        //services[k].checked = true;
    }
    layui.use(['form', 'laydate'], function () {
        var form = layui.form, layer = layui.layer, $ = layui.$, laydate = layui.laydate;
        new Vue({
            el: "#app",
            data: {
                id: Id,
                services: services,//供选择的分区列表
                type: 0, //选择的类型 0=指定分区, 1=所有分区
                checkedAll:false, //区服是否全选
                names:'',
                detail:{
                    game_areas:[], //服务器IDS
                },
            },
            methods: {
                serverIdChange(e){
                    this.type = 0;
                    var serverId = e.target.value;
                    var checked = e.target.checked;
                    var services = this.services;
                    for (k in services) {
                        if (services[k].server_id == serverId ){
                            services[k].checked = checked;
                        }
                    }
                    this.names = this.getAreaNames()
                },
                changeCheckAllStatus: function () {
                    this.type = 0;
                    this.checkedAll = !this.checkedAll;
                    var services = JSON.parse(JSON.stringify(this.services))
                    for (k in services) {
                        services[k].checked = this.checkedAll
                    }
                    this.services = services;
                },
                getAreaNames: function () {
                    var services = this.services
                    var names = [];
                    for (k in services) {
                        if (services[k].checked === true ){
                            names.push(services[k].name)
                        }
                    }
                    names.join(', ')
                    return names;
                },
            },
            updated:function(){
                form.render();
            },
            mounted: function () {
                var _this = this;
                form.render();
                laydate.render({
                    elem: '#createTime0',
                    type: 'datetime',
                    fullPanel: true
                });
                laydate.render({
                    elem: '#createTime1',
                    type: 'datetime',
                    fullPanel: true
                })

                if (this.id) {
                    $.get('/admin/horseRaceLamp/' + this.id, {}, function (res) {
                        var data = res.data;
                        var gameAreas = data.game_areas;
                        _this.type = data.type
                        for(k in _this.services){
                            var v = _this.services[k]
                            if (gameAreas && gameAreas.indexOf(v.code) !==-1){
                                v.checked = true;
                            }
                        }
                        _this.services.forEach(x=>{
                            if(gameAreas.indexOf(parseInt(x.server_id)) !==-1) {
                                x.checked = true;
                            }
                        })
                        _this.names = _this.getAreaNames()
                        _this.detail = res.data;
                        form.val('theForm', {
                            title:data.title,
                            content:data.content,
                            beginTime:getYMDHMS(data.begin_time),
                            endTime:getYMDHMS(data.end_time),
                            intervalTime:data.interval_time,
                        })
                        form.render()
                    })
                    //表单初始赋值
                }
                form.on("checkbox(area_checkbox)",function(data){
                    var index = parseInt($(data.elem).attr('data-index'))
                    var checked = $(data.elem).prop('checked')
                     _this.services[index].checked = checked
                })
                //监听提交
                form.on('submit(submit-btn)', function (data) {
                    var formData = data.field;
                    formData.type = _this.type;
                    if (Id) { //edit
                        formData._method = 'put';
                        $.post('/admin/horseRaceLamp/' + Id, formData, function (res) {
                            if (res.code === 0) {
                                layer.msg('success', {icon: 6, time: 500}, function () {
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg, {icon: 5})
                            }
                        })
                    } else { //add
                        if (parseInt(formData.intervalTime) % 5 !== 0){
                            layer.msg('推送间隔必须是5的整数');return false;
                        }
                        $.post('/admin/horseRaceLamp/add', formData, function (res) {
                            if (res.code === 0) {
                                layer.msg('success', {icon: 6, time: 500}, function () {
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg, {icon: 5})
                            }
                        })
                    }
                    return false;
                });

            }
        })
    })
</script>

</body>
</html>